<!DOCTYPE html>
<html>
    <head>
        <title>我的主页</title>
        <meta charset="utf-8">
        <style>
            #zuoye1{
                height: 500px;
                background-image: url(1.jpg);
               
              
              
            }
            h1{
                text-align: center;
                
                font-size: 30px;
                
            }
           
            
            body{
                margin: 0;
                /*margin-bottom: 100px;*/
                background-color:#CCCCCC ;
            }
          
            #box{
                width: 1000px;
                margin:  auto;
               
            }
            .wo{
                width: 100%;
                border: solid 10px goldenrod;
            }
            .ni{
                text-indent: 2em;
                font-family: 仿宋;
                color: #660033;

            }
            #top{
                /*background-color:#CCCCCC;*/
                width: 100%;
                height: 100px;
                position: fixed;
            }
            #top1{
                width: 500px;
                /*background-color: red;*/
                margin: 0 auto;
                text-align: center;
                font-size:100 px;
            }
            #bg-pic{
                height: 500px;
                background-image:url(1.jpg);
                position: relative; 
            }
            .ph{
                height: 200px;
                width: 200px;
                border-radius: 50%;
                position: absolute;
            }
            #ph1{
                right: 0;
                top:0;
            }
           #ph2{
               right: 400px;
               bottom: 0;
           }
           #ph3{
               right: 0;
               bottom: 0;
           }
           
           
        </style>
    </head>
    <body>
        <div id="top">
            <div id="top1">
                <a href="#1">风去八百里</a>
                <a href="#2">不及你十里</a>
                <a href="#3">一去无归期</a>
            </div>
        </div>
        <div id="zuoye1"></div>
        <h1></h1>
        <div id="box">
            <h2>&lt;风景一览&gt;</h2>
            <p id="1">风去八百里</p>
            <hr>
            <p class="ni">颓唐小城，已逝芳华，残颜何人赏？一首城谣，唱不尽离愁，怎堪流年。转瞬花落新枝，散落遍野香。
紫檀熄灭，人亦远去。那被岁月覆盖的花开，一切白驹过隙成为空白。几段唏嘘几世悲欢，路经流年，梦回曲水边，看烟花绽出月圆。
雾散，梦醒，终于瞥见真实，那是千帆过尽后的沉寂。独立江风暮霭沉，欲回首，雨荒来径。
尘埃落定，一曲终了，是谁为她双手倾负天下？又是谁拥得佳人，陪她并肩踏遍天涯？
生生的两端，我们彼此站成了岸。浅浅暗伤，挥墨笔上，负万丈尘寰。芳华嫣语，繁华散场后，竟是幽梦一帘。
一人独守空城，繁华不再，华丽的城谣，终成彼此伤痕。城谣一曲，落花无痕，时光流转成空白。看残破小城故事，鸢飞过，痴人独守倾诉。
一个人，一座城，一生心疼.</p>
            <hr>
            <img class="wo" src="2.jpg">

             <p id="2">不及你十里</p>
            <hr>
            <p class="ni">颓唐小城，已逝芳华，残颜何人赏？一首城谣，唱不尽离愁，怎堪流年。转瞬花落新枝，散落遍野香。
紫檀熄灭，人亦远去。那被岁月覆盖的花开，一切白驹过隙成为空白。几段唏嘘几世悲欢，路经流年，梦回曲水边，看烟花绽出月圆。
雾散，梦醒，终于瞥见真实，那是千帆过尽后的沉寂。独立江风暮霭沉，欲回首，雨荒来径。
尘埃落定，一曲终了，是谁为她双手倾负天下？又是谁拥得佳人，陪她并肩踏遍天涯？
生生的两端，我们彼此站成了岸。浅浅暗伤，挥墨笔上，负万丈尘寰。芳华嫣语，繁华散场后，竟是幽梦一帘。
一人独守空城，繁华不再，华丽的城谣，终成彼此伤痕。城谣一曲，落花无痕，时光流转成空白。看残破小城故事，鸢飞过，痴人独守倾诉。
一个人，一座城，一生心疼.</p>
            <hr>
            <img class="wo" src="3.jpg">
          <p id="3">一去无归期</p>
          <hr>
          <p class="ni">颓唐小城，已逝芳华，残颜何人赏？一首城谣，唱不尽离愁，怎堪流年。转瞬花落新枝，散落遍野香。
紫檀熄灭，人亦远去。那被岁月覆盖的花开，一切白驹过隙成为空白。几段唏嘘几世悲欢，路经流年，梦回曲水边，看烟花绽出月圆。
雾散，梦醒，终于瞥见真实，那是千帆过尽后的沉寂。独立江风暮霭沉，欲回首，雨荒来径。
尘埃落定，一曲终了，是谁为她双手倾负天下？又是谁拥得佳人，陪她并肩踏遍天涯？
生生的两端，我们彼此站成了岸。浅浅暗伤，挥墨笔上，负万丈尘寰。芳华嫣语，繁华散场后，竟是幽梦一帘。
一人独守空城，繁华不再，华丽的城谣，终成彼此伤痕。城谣一曲，落花无痕，时光流转成空白。看残破小城故事，鸢飞过，痴人独守倾诉。
一个人，一座城，一生心疼.</p>
        <hr>
        <div id="bg-pic">
            <div>
                <img class="ph" id="ph1" src="2.jpg" alt="">
                <img class="ph" id="ph2" src="3.jpg" alt="">
                <img class="ph" id="ph3"src="pic.png" alt="">
                </div>

        </div>
        </div> 
        <br>      
    </body>
</html>